/*
 * @Author: zeki mini
 * @Date: 2021-04-15 17:30:30
 * @LastEditors: zeki mini
 * @LastEditTime: 2021-04-16 17:39:33
 * @Description: 文章列表
 */

import React, { Component } from 'react';
import { mainBgColorWhite } from '@/images';
import { msg } from '@/common';
import { px2dp } from '@/styles';
import homeApi from '@/api/home';
import {
  View,
  StyleSheet,
  Text,
  SafeAreaView,
} from 'react-native';
import XmList from '../../../../components/XmList';
import ArticleCell from '../compoonents/article-cell';
import EmptyPage from '../../../../components/EmptyPage';

export default class InsuranceArticleList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      articleList: [], //
      isLoading: false,
      showFoot: 1,
      pageNo: 1,
      pageSize: 10,
      cateId: '',
      status: 1
    };
  }

  componentDidMount() {
    this.loadData();
  }

 // 下拉刷新
 loadData = () => {
   this.setState(
     {
       isLoading: true,
       pageNo: 1,
       articleList: [],
     },
     () => {
       const { pageNo, pageSize, cateId, status } = this.state;
       this.partLoadTjData(pageNo, pageSize, cateId, 'dropdown');
     },
   );
 }

pullMoreData = () => {
  const { pageNo, pageSize, cateId } = this.state;
  this.setState(
    {
      isLoading: true,
      pageNo: pageNo + 1,
      // articleList: [],
    },
    () => {
      this.partLoadTjData(pageNo, pageSize, cateId, 'pullMore');
    },
  );
}

  partLoadTjData = (pNo, pSize, cateId, type) => {
    const myMallParams = {
      appSystem: '缘多新联盟',
      code: 'insuranceList',
      pageNo: pNo,
      pageSize: pSize
    };

    homeApi.pageDefHomeContentInfo(myMallParams).then(res => {
      let { articleList, pageNo, pageSize } = this.state;
      const newList = res.data.result;
      if (res.success) {
        if (res.data.total === 0) {
          this.setState({
            isLoading: false,
            showFoot: 0
          });
          return;
        }

        if (res.data.result.length <= 0) {
          this.setState({
            isLoading: false,
            showFoot: 1
          });
          return;
        }

        if (type === 'dropdown') {
          this.setState({ isLoading: false });
          articleList = newList.concat(articleList);
        } else if (type === 'pullMore') {
          articleList = articleList.concat(newList);
        }

        this.setState({
          pageNo: pageNo + 1,
          articleList
        });
        if (res.data.result.length <= pageSize) {
          this.setState({
            isLoading: false,
            showFoot: 1
          });
        }
      } else {
        this.setState({
          isLoading: false,
          showFoot: 0
        });
        msg.emit('app:tip', { text: '获取失败' });
      }
    }).catch(err => {
      console.log(err);
      this.setState({
        isLoading: false,
        showFoot: 0
      });
    });
  }

  jumpDetail = (item) => {
    msg.emit('router: goToNext', {
      routeName: 'InsuranceArticleDetail',
      item
    });
  }

  render() {
    const { articleList, isLoading, showFoot } = this.state;
    const renderItem = ({ item, index }) => {
      return (
        <>
          <ArticleCell
            key={index}
            source={item}
            type={item.cateName || xmType}
            onPress={this.jumpDetail}
          />
          {index === articleList.length - 1 && (
            <View style={styles.footerBox}>
              <View style={styles.leftLines} />
              <Text style={styles.footerText}>没有更多啦</Text>
              <View style={styles.rightLines} />
            </View>
          )}
        </>
      );
    };
    return (
      <SafeAreaView style={{ backgroundColor: mainBgColorWhite, flex: 1 }}>
        <XmList
          style={{ paddingTop: px2dp(12) * 2 }}
          sources={articleList}
          renderItem={renderItem}
          isLoading={isLoading}
          onDropdownRefresh={() => this.loadData()}
          onPullUpMore={() => this.pullMoreData()}
          singleKey={(item, index) => index.toString()}
          // showFoot={showFoot}
          noText='暂无头条'
          customEmptyView={<EmptyPage noText='暂无头条' />}
        />
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  footerBox: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: px2dp(32),
    marginBottom: px2dp(64)
  },
  leftLines: {
    width: px2dp(100),
    height: px2dp(1),
    backgroundColor: '#E6E6E5'
  },
  rightLines: {
    width: px2dp(100),
    height: px2dp(1),
    backgroundColor: '#E6E6E5'
  },
  footerText: {
    color: '#CDCCCB',
    fontSize: px2dp(24),
    marginHorizontal: px2dp(16)
  }
});
